<template>
  <div>
    <login-top middle-top="注册bilbili">
      <div
        slot="right"
        style="font-size: 4vw"
        @click="$router.push('/login')">
        登录
      </div>
    </login-top>

    <login-text
      label="姓名"
      style="margin: 4vw 0"
      placeholder="请输入姓名"
      rule="^.{6,16}"
      @inputChange="res => model.name = res">
    </login-text>

    <login-text
      label="账号"
      style="margin: 4vw 0"
      placeholder="请输入账号"
      rule="^.{6,16}"
      @inputChange="res => model.username = res">
    </login-text>

    <login-text
      label="密码"
      placeholder="请输入密码"
      type="password" rule="^.{6,16}"
      @inputChange="res => model.password = res">
    </login-text>

    <login-btn btn-text="注册" @registerSubmit="registerSubmit"></login-btn>
  </div>
</template>

<script>
  import LoginTop from  '../components/common/LoginTop'
  import LoginText from  '../components/common/LoginText'
  import LoginBtn from  '../components/common/LoginBtn'
  export default {
    data(){
      return {
        model:{
        }
      }
    },
    components:{
      LoginTop,
      LoginText,
      LoginBtn
    },
    methods:{
       async registerSubmit(){
         let rulg = /^.{6,16}/
         if(rulg.test(this.model.name) && rulg.test(this.model.username)&& rulg.test(this.model.password)){
           const res =  await this.$http.post('/register',this.model)
           this.$msg.fail(res.data.msg)
           window.sessionStorage.setItem('token',res.data.objtoken)
           window.sessionStorage.setItem('id',res.data.id)
           setTimeout(() => {
             this.$router.push('/userinfo')
           },2000)
         }else{
           this.$msg.fail('格式不正确,请重新输入!')
         }
      }
    }
  }
</script>

<style lang="less" scoped>
</style>
